'use client';
import React, { useState } from 'react';
import { Plus, X, ChevronDown, ChevronRight } from 'lucide-react';
import { groupedMockStores } from './constants/mockData';
import platformIcons from './PlatformIcons';

const ShopKnowledgeDropdown: React.FC = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [expandedPlatform, setExpandedPlatform] = useState<string | null>(null);

  const handleOpenModal = () => setModalOpen(true);
  const handleCloseModal = () => setModalOpen(false);

  const togglePlatform = (platform: string) => {
    setExpandedPlatform((prev) => (prev === platform ? null : platform));
  };

  const handleSelectShop = (storeId: string, storeName: string) => {
    console.log(`选择了店铺：${storeName}（ID: ${storeId}）`);
    setModalOpen(false);
  };

  return (
    <>
      <button
        onClick={handleOpenModal}
        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold"
      >
        <Plus className="w-4 h-4" />
        创建店铺知识库
      </button>

      {modalOpen && (
        <div className="fixed inset-0  bg-opacity-20 backdrop-blur-xs flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4 shadow-xl border border-gray-100">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-medium text-gray-900">创建知识库</h3>
              <button
                onClick={handleCloseModal}
                className="text-gray-400 hover:text-gray-600"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4 max-h-[360px] overflow-y-auto">
              {groupedMockStores.map(({ platform, name, stores }) => (
                <div
                  key={platform}
                  className="border border-gray-100 rounded-lg"
                >
                  <div
                    className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50"
                    onClick={() => togglePlatform(platform)}
                  >
                    <div className="flex items-center gap-2 text-gray-800">
                      <span>{platformIcons[platform]}</span>
                      <span className="font-medium">{name}</span>
                    </div>
                    {expandedPlatform === platform ? (
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    ) : (
                      <ChevronRight className="w-4 h-4 text-gray-500" />
                    )}
                  </div>

                  {expandedPlatform === platform && (
                    <div className="px-4 pb-3 bg-gray-50">
                      <div className="pl-6 border-l-2 border-blue-100 space-y-1">
                        {stores.map((store) => (
                          <div
                            key={store.id}
                            onClick={() =>
                              handleSelectShop(store.id, store.name)
                            }
                            className="text-sm text-gray-700 hover:text-blue-600 hover:underline cursor-pointer py-1 transition-colors"
                          >
                            {store.name}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default ShopKnowledgeDropdown;
